import { Breadcrumb, Button } from 'antd';
import { useState, memo, useEffect } from 'react';
import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
import { RightOutlined } from '@ant-design/icons';
import { DatasetListItem } from '@/common';

interface Props {
  disable: boolean;
  crumbs: ItemType[];
  defaultBreadcrumb: ItemType;
  onItemClicked?: (item: DatasetListItem | undefined) => void;
}

const BreadCrumb = ({ disable = false, crumbs, defaultBreadcrumb, onItemClicked }: Props) => {
  const [breadCrumbs, setBreadCrumbs] = useState<ItemType[]>([defaultBreadcrumb]);

  const onClick = (item: any) => {
    onItemClicked && onItemClicked(item);
  };

  useEffect(() => {
    const items = crumbs?.map((item, index) => {
      return {
        title: <Button type="text">{item.title?.toString()}</Button>,
        item: item,
        key: index,
      };
    });

    items.unshift({
      title: (
        <Button
          type="text"
          onClick={() => {
            onClick(undefined);
          }}
        >
          {defaultBreadcrumb.title}
        </Button>
      ),
      item: undefined,
      key: -1,
    });

    setBreadCrumbs(items);
  }, [crumbs, defaultBreadcrumb]);

  return (
    <div
      className={`bread-crumb flex w-full items-center rounded-xl bg-[#F5F7FB] ${
        disable ? 'breadcrumb-disabled' : ''
      }`}
    >
      <Breadcrumb
        items={breadCrumbs}
        style={{ fontSize: '16px', marginLeft: '10px', marginTop: '5px', marginBottom: '5px' }}
        separator={<RightOutlined size={16} />}
      />
    </div>
  );
};

export default memo(BreadCrumb);
